<template>
<div>
    <el-card  class="container">
             <div style="margin: auto;">
                用户登陆平台
            </div>
        <el-form style="margin-top: 30px;width: 100%;">
            <el-form-item
                prop="username"
                label="账号"
                >
                <el-input v-model="formData.username" />
            </el-form-item>
            
            <el-form-item
                prop="username"
                label="密码"
                >
                <el-input v-model="formData.password" />
            </el-form-item>
            

            <el-form-item ><el-button type="success" @click="login()">登陆</el-button></el-form-item>
        </el-form>
    </el-card>
</div>
</template>



<script setup lang="ts">

import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router'

    //登陆账号
    const formData = reactive({
        username: 'admin',
        password: '123456',    
    });
    const router = useRouter()
    const login = ()=>{
        console.log(formData.username);
        if(formData.username=='admin' && formData.password=="123456"){
            ElMessage({
                message: '登陆成功',
                type: 'success',
            })
          router.push("/home")
        }else{
            ElMessage({
                message: '登陆失败',
                type: 'error',
            })
        }
    }




// function ElMessage(arg0: { message: string; type: string; }) {
// throw new Error('Function not implemented.');
// }
</script>

<style scoped lang="scss">
    .container {
        width: 500px;
        height: 500px;
        padding: 20px;
        margin: auto;
        border: 1px solid black;
        .el-button{
            margin: auto;
            width: 150px;
        }
    }
    

</style>
